<template>
  <el-container class="container">
    <el-header class="header">
      <el-row :gutter="20">
        <el-col
          :span="12"
        ><div class="grid-content bg-purple">
          <p class="titleMain">运营人员（当天）</p>
          <div class="div_flex">
            <div class="day_flex">
              <span>{{ operate.total ? '0' : operate.total }}</span>
              <p>工单总数（个）</p>
            </div>
            <div class="day_flex">
              <span>{{
                operate.completedTotal ? '0' : operate.total
              }}</span>
              <p>完成工单（个）</p>
            </div>
            <div class="day_flex">
              <span>{{
                operate.cancelTotal ? '0' : operate.total
              }}</span>
              <p>拒绝工单（个）</p>
            </div>
            <div class="day_flex">
              <span>{{
                operate.workerCount ? '0' : operate.total
              }}</span>
              <p>运营人员数（个）</p>
            </div>
          </div>
        </div>
        </el-col>
        <el-col
          :span="12"
        ><div class="grid-content grid_olor">
          <p class="titleMain">运维人员（当天）</p>
          <div class="div_flex">
            <div class="day_flex">
              <span>{{ service.total ? '0' : operate.total }}</span>
              <p>工单总数（个）</p>
            </div>
            <div class="day_flex">
              <span>{{
                service.completedTotal ? '0' : operate.total
              }}</span>
              <p>完成工单（个）</p>
            </div>
            <div class="day_flex">
              <span>{{
                service.cancelTotal ? '0' : operate.total
              }}</span>
              <p>拒绝工单（个）</p>
            </div>
            <div class="day_flex">
              <span>{{
                service.workerCount ? '0' : operate.total
              }}</span>
              <p>运营人员数（个）</p>
            </div>
          </div>
        </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-main class="mian">
        <div class="top">
          <div class="left">工单状态</div>
          <div class="right">
            <div class="chooseTime">
              <div class="block">
                <el-date-picker
                  v-model="valueTime"
                  style="width: 250px"
                  align="center"
                  type="daterange"
                  :picker-options="pickerOptions"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd"
                />
              </div>
            </div>
            <div class="weeak-month-year">
              <div
                class="item"
                :class="{ 'is-checked': istype === 'week' ? true : false }"
                @click="changetype('week')"
              >
                周
              </div>
              <div
                class="item"
                :class="{ 'is-checked': istype === 'month' ? true : false }"
                @click="changetype('month')"
              >
                月
              </div>
              <div
                class="item"
                :class="{ 'is-checked': istype === 'year' ? true : false }"
                @click="changetype('year')"
              >
                年
              </div>
            </div>
          </div>
        </div>
        <!-- Echarts图表 -->
        <div ref="social" style="width: 100%; height: 100%" />
        <!-- 无数据的背景图 -->

      </el-main>
      <el-aside width="540px" class="aside">
        <div class="top">
          <span>人效排名（月度）</span>
          <el-select
            v-model="value"
            placeholder="全部"
            style="width: 90px; height: 32px"
          >
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click.native="getData"
            />
          </el-select>
        </div>
        <el-radio-group
          v-model="radio1"
          class="radioGroup"
          @input="changeValue"
        >
          <el-radio-button label="运营人员" />
          <el-radio-button label="运维人员" />
        </el-radio-group>
        <div class="pictText">
          <img
            src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          >
          <div>暂无数据</div>
        </div>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>
import { taskReportInfo, userWorkTop, collectReport } from '@/api/personnel/taskReportInfo'
import { areaList } from '@/api/personnel/personnel'
import {
  getToday,
  getTime,
  getCurrentTimeRange,
  getYearnum,
  getMonthnum
} from '@/utils/date'

import * as echarts from 'echarts'
export default {
  name: 'PeopleCounting',
  data() {
    return {
      radio1: '运营人员',
      start: '',
      end: '',
      operate: {}, // 运营人员数据
      service: {}, // 维护人员数据
      value: '0',
      valueTime: '',
      istype: 'week',
      startTime: '',
      endTime: '',

      isBloo: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      queryObj: {
        pageIndex: 1,
        pageSize: 10000
      },
      areaList: null,
      allarea: {
        id: '0',
        name: '全部'
      },
      homeData: {},
      weekTimeStart: '',
      weekTimeEnd: '',
      mounthTimeStart: '',
      mounthTimeEnd: '',
      yearTimeStart: '',
      yearTimeEnd: '',
      yearData: [],
      newYearData: []
    }
  },
  watch: {
    yearData(newValue, oldValue) {
      this.newYearData = newValue
      console.log(this.newYearData)
    }
  },
  async created() {
    const { start, end } = getToday()
    this.start = start
    this.end = end
    const res = await taskReportInfo(this.start, this.end)
    this.operate = res[0]
    this.service = res[1]
    const ddd = getTime()
    this.startTime = ddd[1][0]
    this.endTime = ddd[1][1]
    const data = await areaList(this.queryObj)
    this.areaList = data.currentPageRecords
    this.areaList.unshift(this.allarea)
    this.changetype('week')

    const weekTime = getCurrentTimeRange()// 周时间
    this.weekTimeStart = weekTime.start
    this.weekTimeEnd = weekTime.end
    const mounthTime = getMonthnum()
    this.mounthTimeStart = mounthTime.start
    this.mounthTimeEnd = mounthTime.end
    const yearTime = getYearnum()
    this.yearTimeStart = yearTime.start
    this.yearTimeEnd = yearTime.end
    this.$nextTick(() => {
      this.aaa()
    })
  },
  mounted() {
    this.social = echarts.init(this.$refs.social)
  },

  methods: {
    async changetype(type) {
      this.istype = type
      if (type === 'week') {
        const res = getCurrentTimeRange()
        const beg = res.start
        const end = res.end
        this.valueTime = [beg, end] // 将值设置给插件绑定的数据
        this.$nextTick(async() => {
          const collectReportList = await collectReport(this.weekTimeStart, this.weekTimeEnd)
          console.log(collectReportList)
          this.yearData = collectReportList
          this.dealData()
          this.aaa()
        })
      }
      if (type === 'month') {
        // 获取新的时间
        const date = new Date()
        // 获取当前时间的年份转为字符串
        const year = date.getFullYear().toString()
        // 获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
        const month =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1).toString()
            : (date.getMonth() + 1).toString()
        // 获取天，判断是否小于10，如果是在字符串前面拼接'0'
        const da =
          date.getDate() < 10
            ? '0' + date.getDate().toString()
            : date.getDate().toString()
        // 字符串拼接，开始时间，结束时间
        const end = year + '-' + month + '-' + da // 当天
        const beg = year + '-' + month + '-01' // 当月第一天
        this.valueTime = [beg, end] // 将值设置给插件绑定的数据
        const collectReportList = await collectReport(this.mounthTimeStart, this.mounthTimeEnd)
        console.log(collectReportList)
        this.yearData = collectReportList
        this.dealData()
        this.aaa()
      }
      if (type === 'year') {
        const res = getYearnum()
        const beg = res.start
        const end = res.end
        this.valueTime = [beg, end] // 将值设置给插件绑定的数据
        const collectReportList = await collectReport(this.yearTimeStart, this.yearTimeEnd)
        console.log(collectReportList)
        this.yearData = collectReportList
        this.dealData()
        this.aaa()
      }
    },
    changeValue(va) {
      if (va === '运营人员') {
        this.isBloo = true
      }
      if (va === '运维人员') {
        this.isBloo = false
      }
      this.getData() //
    },
    async getData() {
      await userWorkTop(this.startTime, this.endTime, this.isBloo, this.value)
    },
    aaa() {
      this.social.setOption({
        xAxis: {
          type: 'category',
          data: this.newYearData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [0, 0.2, 0.4, 0.6, 0.8],
            type: 'line',
            showSymbol: false,
            animation: false,
            symbolSize: 0, // 设置symbol的大小设置为0
            lineStyle: {
              width: 0, // 设置线宽为0
              color: 'rgba(0, 0, 0, 0)' // s设置线的颜色为透明
            }

          }
        ]
      })
    },
    dealData() {
      const arr = this.yearData.map((item) => {
        return item.collectDate.substring(6, 10).replace('-', '月') + '日'
      })
      this.newYearData = arr
    }

  }
}
</script>

<style scoped lang="scss">
h2 {
  margin-top: 70px;
}
.container {
  margin: 20px;
  margin-top: 80px;
  .header {
    background-color: #fff;
    padding-top: 10px;
    height: 200px !important;
  }
  .mian {
    margin-top: 20px;
    background-color: #fff;
    .top {
      display: flex;
      justify-content: space-between;
      .left {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      .right {
        display: flex;
        justify-content: space-evenly;
      }
    }
  }
  .aside {
    width: 360px !important;
    height: 540px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 20px;
    padding: 20px;
    border-radius: 20px;
    position: relative;
    .pictText {
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translateX(50%);
      text-align: center;
    }
    .top {
      display: flex;
      justify-content: space-between;
      height: 32px;
      line-height: 32px;
      span {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
    .radioGroup {
      margin-left: 80px;
      margin-top: 20px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #e9f3ff;
}
.grid_olor {
  background-color: #fbefe8;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  padding: 10px;
  border-radius: 4px;
  min-height: 180px;
  width: 700px;
  border-radius: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.div_flex {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  span {
    color: #072074;
    text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
    font-size: 36px;
    font-weight: 600;
  }
  p {
    color: #91a7dc;
    font-size: 12px;
    margin-left: 50px;
  }
}
.grid_olor {
  span {
    color: #ff5757;
    text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
  }
  p {
    color: #de9690;
  }
}
.titleMain {
  font-weight: bold;
  color: #000 !important;
}
::v-deep .el-input__inner {
  height: 32px;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  width: 78px;
  height: 25px;
  line-height: 0px;
  background-color: #fff;
  border-color: #fff;
  border: none !important;
  -webkit-box-shadow: 0px 0 0 0 #409eff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11) !important;
  border-radius: 7px !important;
  font-weight: 600;
  color: #333;
}
::v-deep .el-radio-button__inner {
  width: 78px;
  height: 25px;
  line-height: 0px;
  font-size: 14px !important;
  font-weight: 600;
  padding-right: 70px !important;
  border-radius: 20px;
  border: none !important;
  font-size: 16px;
  color: #9ca3b4;
}
.item {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 37px;
  height: 25px;
  font-size: 14px;
  color: #9ca3b4;
  cursor: pointer;
}
.weeak-month-year {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  width: 129px;
  height: 34px;
  background: rgba(233, 243, 255, 0.37);
  border-radius: 10px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.is-checked {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 37px;
  height: 25px;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
  border-radius: 7px;
  font-weight: 600;
  color: #333;
}
</style>
